<template>
	<view>
		
		<view>
			
			<view class="commodity-details-a">
				<view  style="text-align: left">
				  <p ><text style="font-weight: bolder;margin-bottom: 0.5rem">{{detaList.constructionName}}</text></p>
				  <p style="display: inline-block">￥<text style="font-size: 1.5rem;font-weight: bolder">{{detaList.price}}</text>元/㎡起</p>
				  <!-- <p style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">销量:<text>455</text></p> -->
				  <p style="display: inline-block;font-size: 0.5rem;margin-left: 0.5rem">已成交:<text>561次</text></p>
				</view>
				<view style="text-align: right">
	
				  
				  <!--<p>分享</p>-->
				  <!-- <van-button @click="fenxiang">aa</van-button> -->
				</view>
			</view>
			
		</view>
		
		
		<view
		          style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> </view>
		  <view style="background-color: #fff;height: 100rpx;">
			<view style="margin-left: 50rpx;">店铺地址: {{detaList.address}}  1.8km</view>
			<view style="margin-left: 50rpx;"> <p>营业时间: 24小时</p></view>
		  </view>
		
		
		<view
		          style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 0px' }"> </view>
		
		
		<view  class="five" style="display: flex;">
		  <view >
			<view @click="teseButton">
				<image src="../../static/tabs/featureserve.png" mode=""></image>
				<p style="font-size: 0.8rem"><b>特色服务</b></p>  
			</view>
		  </view>
		  <view > 
			<view @click="handleScroll('one')">
				<image src="../../static/tabs/certification.png" mode=""></image>
				<p style="font-size: 0.8rem"><b>资质荣誉</b></p>  
			</view>
		  </view>
		  <view > 
			<view @click="">
				<image src="../../static/tabs/adept .png" mode=""></image>
				<p style="font-size: 0.8rem"><b>施工擅长</b></p>  
			</view>
		  </view>
		  <view >  
			<view @click="andleScroll('two')">
				<image src="../../static/tabs/CaseShow.png" mode=""></image>
				<p style="font-size: 0.8rem"><b>案例展示</b></p>  
			</view>
		  </view>
		  <view > 
			<view @click="teseButton">
				<image src="../../static/tabs/coverage .png" mode=""></image>
				<p style="font-size: 0.8rem"><b>服务区域</b></p>  
			</view>
		  </view>
		</view>
		
		
		<view style="padding: 0.5rem 1rem;" align="left">
		  <view>
			<b><text style="font-size: 1.3rem">服务</text></b>
		  </view>
		  <view >
			<text style="font-family: PingFangSC-regular;color: rgba(91, 91, 91, 100);">队伍/公司名称</text>
			<text style="margin-left: 50rpx;">{{detaList.supplierName}}</text>

		  </view>
		  <view class="solid" style="width: 685rpx; height: 1rpx; background-color: #BBBBBB;margin-top: 20rpx;"/>
		  <view style="display: flex;">
			<view text="10" style="font-family: PingFangSC-regular;color: rgba(91, 91, 91, 100);">队伍人数</view>
			<text style="margin-left: 150rpx;">{{detaList.temaNumber}}</text>

		  </view>
		  <hr style="margin-top: 20rpx;"/>
		  <view>
			<text style="font-family: PingFangSC-regular;color: rgba(91, 91, 91, 100);">手机号</text>
			<text style="color: rgba(16, 16, 16, 100);font-family: PingFangSC-regular;margin-left: 150rpx;">{{detaList.phoneNumber}}</text>

		  </view>
		  <hr style="margin-top: 20rpx;"/>
		<view>
		  <text>业务分类：</text>
		</view>
		<view>

			<b>
			  <text style="font-size: 0.8rem">业务分类业务分类业务分类业务分类业务分类业</text>
			</b>

		</view>
		<view>
		  <text>业务范围：</text>
		</view>
		<view>

			<b>
			  <text style="font-size: 0.8rem">业务范围业务范围业务范围业务范围</text>
			</b>

		</view>
	  </view>
	  


		  <view style="width: 750rpx;height: 80rpx;background-color: #fff;" @click="anliButton(index.constructionId)">
		  <!--<van-cell is-link :to="'/DecorateACase'">-->
			<!--<b>施工案例</b> （12） <text align="left">查看全部</text> -->
			<view style="line-height: 80rpx;margin-left: 50rpx;">
			  <text><b>施工案例</b></text>
			  <text>(12)</text>
			  <text>.</text>
			  <text>.</text>
			  <text style="float: right;margin-right: 50rpx;">
				查看全部
			  </text>
			</view>
		  </view>


	  
	  <view style="display: flex;">
	    <view style="display: flex;">
			<view @click="toConstruction(index.caseId,index.constructionId)">
			  <image style="width: 300rpx;height: 300rpx;margin-left: 50rpx;" src="../../static/tabs/girl.jpg" />
			</view>
		</view>
		
		<view style="margin: 30rpx;line-height: 40rpx;">
			<view @click="toConstruction(index.caseId,index.constructionId)">
				
				<p style="font-size: 0.9rem;">户型面积: {{index.doorArea}}㎡</p>
				<p style="font-size: 0.9rem">装修报价: {{index.decoratePrice}}万</p>
				<p style="font-size: 0.9rem">装修风格: {{index.decorStyle}} </p>
				<p style="font-size: 0.9rem">设计师: {{index.stylist}}</p>
				
			</view>
		</view>
		
	  </view>
		
		 <view id="one" style="padding-bottom: 10%" >
		          <view style="display: flex;flex-direction: column;margin: 50rpx;">
		            <text><b>资质荣誉</b></text>
		          </view>
		
		          <view>

		            <text style="margin: 50rpx;">营业执照</text>
		            <view class="image-div">
		              <swiper @change="onChange1"  class="my-swipe" indicator-color="white" >
		                <swiper-item v-for="item in RongOne" >
		                  <image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
		                </swiper-item>
		                <template #indicator>
		                  <view class="custom-indicator">{{ current1 + 1 }}/{{RongOne.length}}</view>
		                </template>
		              </swiper>
		            </view>
		          </view>
		

		       
		            <text style="margin: 50rpx;">施工资质</text>
		            <view class="image-div">
		              <swiper @change="onChange2"  class="my-swipe"  indicator-color="white" >
		                <swiper-item v-for="item in RongTwo" >
		                  <image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
		                </swiper-item>
		                <template #indicator>
		                  <view class="custom-indicator">{{ current2 + 1 }}/{{RongTwo.length}}</view>
		                </template>
		              </swiper>
		            </view>


		

		            <text style="margin: 50rpx;">荣誉证书</text>
		            <view class="image-div">
		              <swiper @change="onChange3"  class="my-swipe" indicator-color="white" >
		                <swiper-item v-for="item in RongThree" >
		                  <image width="100%" height="100%" fit="cover" :src="item.conUrl"/>
		                </swiper-item>
		                <template #indicator>
		                  <view class="custom-indicator">{{ current3 + 1 }}/{{RongThree.length}}</view>
		                </template>
		              </swiper>
		            </view>

		        </view>
		
		
		<view>
			<view class="down">
				<view class="iphone" @click="onClickIcon">
					<image src="../assets/phone.png" mode=""></image>
					<text>电话咨询</text>
				</view>
				
				<view class="sku-btn" style="margin-top: -90rpx; width: 420rpx;border-radius: 40rpx;float: right;background-color: #5677FC;color: #fff;" @click="selectSku">立即支付</view>
			</view>
		<echone-sku
			:show="popupShow" 
			 mode="forbidden"
			:theme-color="themeColor" 
			:combinations="combinations" 
			:specifications="specifications" 
			:default-select-index="selectedIndex" 
			:combinations-props="combinationsProps"
			:specifications-props="specificationsProps"
			@close="handleClose" 
			@confirm="handleConfirm"
		></echone-sku>
<!-- 			  <van-goods-action>
			         <van-goods-action-icon style="width: 8rem" icon="phone-circle-o" text="电话咨询" @click="onClickIcon" />
			          <van-goods-action-button type="danger" text="立即购买" @click="purchase" />
			  </van-goods-action> -->
			
<!-- 			<van-sku
			          align="left"
			          v-model="show"
			          :sku="sku"
			          :goods="goods_info"
			          :goods-id="goods_id"
			          :hide-stock="sku.hide_stock"
			          :quota="quota"
			          :quota-used="quota_used"
			          :show-add-cart-btn="false"
			          reset-stepper-on-hide
			          reset-selected-sku-on-hide
			          :initial-sku="initialSku"
			          disable-stepper-input
			          :close-on-click-overlay="closeOnClickOverlay"
			          :custom-sku-validator="customSkuValidator"
			          @buy-clicked="onBuyClicked"
			          @add-cart="onAddCartClicked"/> -->
			
		</view>
		
	</view>
</template>

<script>
	import echoneSku from '@/components/echone-sku/echone-sku'; 
	export default {
		components:{
			echoneSku
		},
		data() {
			return{
				themeColor: '#1ac792',
				popupShow: false,
				combinationsProps: {
					id: 'skuId',
					value: 'skuValue',
					image: 'skuImage',
					price: 'skuPrice',
					stock: 'skuStock'
				},
				specificationsProps: {
					id: 'id',
					list: 'skuList',
					name: 'skuName'
				},
				combinations: [
					{
					  skuId: '1',
					  skuValue: '成都市锦江区,2020年',
					  skuImage:
						'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/202005135/3a014c2f42c1c46b.PNG',
					  skuPrice: 80.0,
					  skuStock: 1000,
					},
					{
					  skuId: '2',
					  skuValue: '成都市锦江区,2019年',
					  skuImage:
						'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/20200383/ebd0c8d01a6e9c10.PNG',
					  skuPrice: 100.0,
					  skuStock: 500,
					},
				],
				specifications: [
					{
					  skuName: '规格',
					  id: '123',
					  skuList: ['成都市锦江区', '成都市青羊区'],
					},
					{
					  // skuName: '教育年度',
					  // id: '456',
					  // skuList: ['2020年', '2019年'],
					},
				],
				selectedIndex: 0,
				
				
				
				            pricenum:'',
				            instalmentIdnum:'',
				            form:{
				              numpice:'',
				              numconstructionId:'',
				              numinstalmentState:'',
				            },
				            show: false,
				            caseId:'',
				            // indexfindList:[],
				            typeOptions:[],
				            defaultDictType:"",
				            queryparams: {
				              pageNum: 1,
				              pageSize: 10
				            },
				            careparams: {
				              pageNum: 1,
				              pageSize: 10
				            },
				            goods_id: '',
				            closeOnClickOverlay: true,  //点击空白处关闭购物框
				            showShare: false,
				            quota: 1, //限购数量 库存旁边显示限购数
				            quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
				            goods_info: {
				              title: '',
				              picture:'https://img.yzcdn.cn/vant/apple-1.jpg'  //图片这个我有点混乱
				            },
				            sku: {
				              // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
				              // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
				              tree: [
				                {
				                  k: '规格',
				                  k_s: 's1',
				                  v: [],
				                },
				              ],
				              // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
				              list: [],
				              price: '',  //？？
				              stock_num: null, // 商品总库存？？
				              none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
				              hide_stock: false,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
				            },
				            initialSku:{
				              // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
				              // 值：skuValueId（规格值 id）
				              s1: '1',
				              // 初始选中数量
				              selectedNum: 1,
				            },
				            // 查看店铺优惠券
				            showCoupon: false,
				
				            // detaList: Array,
				            // index: Array,
				
				            images: [
				              // 'https://img.yzcdn.cn/vant/apple-1.jpg',
				              // 'https://img.yzcdn.cn/vant/apple-2.jpg',
				            ],
				
				            nav_list: [
				              //导航数据
				              {
				                title: "特色服务",
				                icon: "photo-fail",
				                path: "Introduction",
				
				              },
				              {
				                title: "资质荣誉",
				                icon: "photo-fail",
				                path: "my_index",
				              },
				              {
				                title: "施工擅长",
				                icon: "photo-fail",
				                path: "my_index",
				              },
				              {
				                title: "案例展示",
				                icon: "photo-fail",
				                path: "my_index",
				              },
				              {
				                title: "服务区域",
				                icon: "photo-fail",
				                path: "inspection_index",
				              }
				              ],
				            constructionId:Number,
				            construction: Object,
				            labelQuantity:1,
				            RongOne:[],
				            RongTwo:[],
				            RongThree:[],
				            queryRong:{
				              constructionIdsnum:'',
				            },
				            //轮播当前页
				            current1: 0,
				            current2: 0,
				            current3: 0,
				
				
				detaList: {
					constructionId: '1',
					constructionName:'赵德建',
					price: '999',
					address: '河北省石家庄市桥西区',
					supplierName: '张三',
					temaNumber: '5',
					phoneNumber: '18333151888',
				},
				
				index:{
					constructionId:'1',
					caseId: '1',
					doorArea: '河北省石家庄市桥西区',
					decoratePrice: '22.5',
					decorStyle:'hiahai',
					stylist:'aa',
					casePicurl:'https://img.yzcdn.cn/vant/cat.jpeg'
				},
			}
		},
		
		created() {
			const constructionId = this.$route.query && this.$route.query.constructionId;
			console.log("*****constructionId****"+constructionId)
		},
		methods:{
			selectSku() { 
				this.popupShow = true
			},
			//施工案例 单个
			toConstruction(caseId){
			  this.$router.push({path:"/pages/index_Buildingconstruction/CaseDetails",query:{constructionId: this.constructionId,caseId: caseId}});
			},
			//施工案例 多个
			anliButton(constructionId){
			  this.$router.push({
				path:"/pages/index_Buildingconstruction/DecorateACase",
				query:{constructionId: constructionId}}
				);
			},
			
			
			
			
			showPopup(){
			
			},
			
			fenxiang(){
				
			},
			
			//特色服务
			teseButton(){
				console.log("特色服务")
			},
			
			handleScroll(id) {
			  var element = document.getElementById(id);
			  element.scrollIntoView();
			},
			
			//立即购买
			purchase(){
				this.show = true;
			},
			// 电话咨询
			onClickIcon(){
				
			},
			handleClose() {
				this.popupShow = false
			},
			
		}
		
	}
</script>

<style>
	.five image{
		width: 50rpx;
		height: 50rpx;
		margin: 0rpx 50rpx;
	}
	.five{
		text-align: center;
	}
	.iphone{
		width: 200rpx;
		height: 100rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		margin-left: 50rpx;
	}
	.iphone text{
		
		color: rgba(16, 16, 16, 100);
		font-size: 24rpx;
		font-family: SourceHanSansSC-regular;
	}
	.down image{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-left: 70rpx;
	}
	.down{
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
	}
	.sku-btn{
		display: flex;
		
		justify-content: space-evenly;
		
		/* text-align: center; */
		
		
		padding: 10px 0;
		
		background-color: #fff;
		
		box-shadow: 0 -1.5px 3px #eee;
		
		z-index: 999;
	}
	.commodity-details-a{
	    padding: 0.5rem 1rem;
	  }
	  .commodity-details-a p{
	    font-size: 0.8rem;
	  }
	  .commodity-details-b{
	    padding: 0 1rem;
	  }
	.van-col image{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	
</style>
